<template>
	<view class="main">
		<u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText">添加技能证书</view>
		</u-navbar>

		<u--form labelPosition="left" :model="model1" labelStyle="color:#424242; font-size:28rpx; " ref="form1">
			<view class="forms">
				<u-form-item label="证书名称" fontSize="12" readonly labelWidth="100" prop="userInfo.range" borderBottom>
					<u--input v-model="formData.cname" fontSize="14" disabledColor="#0F0F0F" inputAlign="right"
						maxlength="20" border="none" placeholder="请输入您的证书名称"></u--input>
				</u-form-item>
				<u-form-item label="领证时间" labelWidth="100" @click="dateChange()" :label-style="{'font-size':'28rpx;'}"
					borderBottom>
					<u--input v-model="formData.issueDate" inputAlign="right" border="none" disabledColor="none"
						disabled></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			<!-- <view class="form">
				<view class="imageUpload">
					<view>上传图片</view>
					<view>可上传工地现场、施工图纸、承包合同等图片</view>
				</view>
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					name="1"
					multiple
					:maxCount="1"
					:previewFullImage="true"
				></u-upload>
			</view> -->
		</u--form>


		<view class="submit"><u-button type="primary" @click="sendPost()" text="确定"></u-button></view>
		<u-datetime-picker :show="dateShow" v-model="dateVal" :minDate='0' :maxDate="maxDate" mode="date"
			@confirm="dateConfirm" @cancel="dateCancel" :formatter="formatter"></u-datetime-picker>

	</view>
</template>

<script>
	import Index from '@/common/index-model.js'
	import pop from "@/components/ming-pop/ming-map.vue"
	import fun from "@/common/publicFun.js"
	let index = new Index();
	let that = null;
	export default {
		data() {
			return {
				id: '',
				myCard: {},
				formData: {
					cname: '',
					imgUrl: '',
					issueDate: ''
				},
				maxDate: '',
				dateShow: false,
				dateVal: '',
				fileList1: [],
				fileImgUrl: [], //图片
			}
		},
		onLoad(opt) {
			this.id = opt.id;
			let date = new Date();
			this.maxDate = date.getTime();
			this.dateVal = fun.formatDate(this.maxDate, "yyyy-MM-dd");
			this.getCardDetail(opt.id);
		},
		onShow() {

		},
		components: {
			pop
		},
		methods: {
			//时间选择
			dateChange() {
				this.dateShow = true;
			},
			dateConfirm(e) {
				this.formData.issueDate = fun.timestampToTime(e.value, '-');
				this.dateShow = false;
			},
			dateCancel(e) {
				this.dateShow = false;
			},
			getCardDetail(id) {
				index.getPublicUserMember({}, '/client/card/detail', 'get', res => {
					if (res.data.code == 200 && res.data.success) {
						let data = res.data.result.certificateInfoList;
						console.log(data);
						const cert = data.filter(
							(item) => item.id == id
						);
						console.log(cert);
						let imgurl = cert[0].imgUrl;
						this.fileList1.push({
							'url': imgurl
						});
						this.formData.cname = cert[0].cname;
						this.formData.issueDate = cert[0].issueDate;
						this.formData.imgUrl = cert[0].imgUrl;
					}
				})
			},
			sendPost() {
				if (!this.formData.cname) {
					index.show_tips('请输入证书名称')
					return
				}
				if (!this.formData.issueDate) {
					index.show_tips('请选择领证日期')
					return
				}
				let url = '';
				if (this.id) {
					url = '/client/card/modifyCert';
				} else {
					url = '/client/card/addCert';
				}
				this.formData.id = this.id;
				index.getPublicUserMember(this.formData, url, 'post', res => {
					if (res.data.code == 200 && res.data.success) {
						index.show_tips('操作成功')
						setTimeout(() => {
							index.navigate_back(1)
						}, 2000)
					} else {
						index.show_tips(res.data.message);
						return false
					}
				})

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.fileImgUrl.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: index.img_url + 'client/public/upload?type=certificate&file=' +
						url, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							'X-Access-Token': uni.getStorageSync('token'),
							'Login-Type': 'client'
						},
						success: (res) => {
							this.formData.imgUrl = JSON.parse(res.data).result.url;
							this.fileImgUrl.push({
								'url': JSON.parse(res.data).result.url
							})
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style>
	@import url("@/static/css/publics.css");
	@import url("./findJob.css");

	page {
		background: #F3F3F3;
	}

	.forms {
		padding: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.form {
		padding: 20rpx;
		background: #fff;
		margin-bottom: 80rpx;
	}

	.imageUpload view:nth-child(1) {
		color: #3D3D3D;
	}

	.imageUpload view:nth-child(2) {
		color: #A1A1A1;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		margin-top: 8rpx;
	}

	.submit {
		padding: 20rpx;
	}

	/deep/.input-placeholder {
		color: #f00;
	}
</style>